<script lang="ts" setup>


import {  Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { ref, onMounted ,watch} from 'vue';
import { getDingdDeptInfo } from '#/api/moxi/dingddeptinfo';


import {

  Card,
  Divider,
  Descriptions,
  DescriptionsItem,
  message,
  Image,

} from 'ant-design-vue';

const deptInfo = ref<SystemUserApi.User>({});

const props = defineProps({
  deptId: {
    type: Number,
    default: 0,
  },
});
// 监听 props.deptId 的变化
watch(() => props.deptId, async (newDeptId) => {
  if (newDeptId) {
    console.log(newDeptId);
    //结构赋值
    deptInfo.value  = await getDingdDeptInfo(newDeptId);

    console.log(deptInfo.value); 
  }
});

</script>

<template>
  <Page>
    <div class="mt-4 flex flex-col gap-4 md:flex-row">
      <!-- 左侧：建立连接、发送消息 -->
      <Card :bordered="false" class="md:w-2/2 w-full">
        <template #title>
          <div class="flex items-center" >
            <span class="ml-2 text-lg font-medium">部门信息</span>
  
          </div>
        </template>
        <div class="mb-4 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-4 text-xl font-medium">基础信息:</span>
        </div>

        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="部门名称"> {{ deptInfo.name }} </DescriptionsItem>
          <DescriptionsItem label="负责人"> {{ deptInfo.deptManagerUseridList }} </DescriptionsItem>
          <DescriptionsItem label="总人数"> {{ deptInfo.memberCount }} </DescriptionsItem>
          <DescriptionsItem label="办公地点"> {{ deptInfo.workPlace }} </DescriptionsItem>
        </Descriptions>

        <Divider>
          <span class="text-gray-500"></span>
        </Divider>
        <div class="mb-4 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-4 text-xl font-medium">部门简介:</span>
        </div>

        <Descriptions :column="1" bordered>
          <DescriptionsItem label="部门简介"> {{ deptInfo.deptDesc }} </DescriptionsItem>
        </Descriptions>
        <Divider>
          <span class="text-gray-300"></span>
        </Divider>
        <!-- <Image
          :width="600"
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        /> -->
      </Card>
    </div>
  </Page>
</template>
